import { createApp } from 'vue'

import './style.css' //公共样式
import App from './App.vue' //根组件
import router from './router/index'
// 1. 引入你需要的组件
import Vant from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';

// 导入rem适配插件
import 'amfe-flexible'
// 引入elementplus组件库
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// createApp 创建vue跟实例方法
// vue3使用 路由对象和vuex对象 使用use方法
// vue3的任意组件传值的插件  兄弟组件传值
import mitt from 'mitt'
import tableTitle from './components/table-title.vue'
let app=createApp(App)
// vue3 的全局方法  从Vue.方法改变app.方法名()
// 注册全局组件的方法

app.component('tableTitle',tableTitle)
// 全局过滤器
// app.filters()
// // vue的全局指令
// 全局引入vantui

app.use(Vant);
app.directive("myif",{
  beforeMount(){},
  mounted(el,bindding){
    console.log(bindding.value)
      if(bindding.value){
        el.style.display="block"
      }else{
         el.style.display="none"
      }
  },
  beforeUpdate(){},
  updated(){},
  beforeUnmount(){},
  unmounted(){}
})
// app.mixin 是vue3的全局混入
// vue3 也支持局部混入，vue3的组合式api写法，很轻松抽离出hooks函数方便复用，完全可以替代mixins的功能，不推荐在vue3中使用混入mixin
// app.mixin({
    // data:{},
    // methods:{},
    // mounted(){}
// })

// 将mitt插件挂载到全局
app.config.globalProperties.$mitt = mitt();

// 使用elmentplus
// app.use(ElementPlus)
// 使用路由
app.use(router)
// 将创建根实例挂载到app
app.mount('#app');



